<template>
  <div class="nav-menu">
    <el-menu
      :collapse-transition="false"
      :collapse="isCollapse"
      router
      default-active="$router.path"
      class="el-menu-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <div class="show-nav" @click="isCollapse=!isCollapse">
        <i class="iconfont daohang-icon" :class="!isCollapse?'iconfont icon-daohangshouqi':'iconfont icon-daohangzhankai'"></i>
      </div>
      <el-menu-item :key="i" v-for="(item,i) in routeList" :index="item.route">
        <i :class="item.icon"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-property-decorator'

export default class NavMenu extends Vue {
  isCollapse = false
  routeList = [
    { name: '充值记录',
      icon: 'iconfont icon-ziyuan',
      route: 'rechargeRecord'
    },
    { name: '订单管理',
      icon: 'iconfont icon-dingdan',
      route: 'orderManage'
    },
    { name: '代理管理',
      icon: 'iconfont icon-agency-management',
      route: 'agencyManage'
    },
    { name: '赛果管理',
      icon: 'iconfont icon-saiguoguanli',
      route: 'resManage'
    },
    { name: '报表管理',
      icon: 'iconfont icon--baobiaoguanli',
      route: 'reportManage'
    },
    { name: '会员管理',
      icon: 'iconfont icon-huiyuanguanli1',
      route: 'memberManage'
    },
    { name: '下注记录',
      icon: 'iconfont icon-xiazhu',
      route: 'betsManage'
    },
    { name: '提款管理',
      icon: 'iconfont icon-tikuan',
      route: 'drawManage'
    },
    { name: '存款申请',
      icon: 'iconfont icon-cunkuan',
      route: 'depositManage'
    },
    { name: '公告管理',
      icon: 'iconfont icon-notice',
      route: 'noticeManage'
    },
    { name: '权限管理',
      icon: 'iconfont icon-quanxianguanli',
      route: 'authorityManage'
    }
  ]
}
</script>
<style lang="less">
  .nav-menu {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    .el-menu i {
      color: #ffffff;
      font-size: 20px;
      padding-right: 10px;
    }
    .show-nav {
      cursor: pointer;
      color: #ffffff;
      height: 56px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .show-nav:hover {
      background: rgb(67, 74, 80);
    }
  }
</style>
